import base from './base.js';
base();

// 饼状线图
// 采集设备分类饼状图
$("#chart1").css("height",$("#chart1").parent().height() + "px");
$("#chart1").css("width",$("#chart1").parent().width() + "px");

$("#pie-chart1").css("height",$("#chart1").parent().height());
$("#pie-chart1").css("width",$("#chart1").parent().width()/2 - 20);
getPieoPtionData_1();
function getPieoPtionData_1() {
    $.get("/equipment/type/list",function (data) {
        var pieChart1 = echarts.init(document.getElementById('pie-chart1'));
        var pieoption1 = {
            title : {
                text: '采集设备数量分布',
                subtext: ' ',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: [ "环境采集设备-ZK03", "监控设备" ]
            },
            series : [
                {
                    name: '采集设备数量',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        { value: 1, name: "环境采集设备-ZK03" },
                        { value: 1, name: "监控设备" },
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        //获取分类数据
        var legend = {
            orient: 'vertical',
            left: 'left',
            data: []
        };
        var series =  [
            {
                name: '采集设备数量',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ];
        $.each(data.data,function (i, ele) {
            legend.data.push(ele.name);
            var obj = {value:0, name: ele.name};
            //获取分类的设备数据
            $.ajax({
                url : "/equipment/query?typeId=" + ele.id,
                async:false,
                success: function (data) {
                    if (data.count > 0) {
                        obj.value = data.count;
                        series[0].data.push(obj);
                    }
                }
            });
        });
        pieoption1.legend = legend;
        pieoption1.series = series;
        pieChart1.setOption(pieoption1);
    });
}

//控制设备
$("#pie-chart2").css("height",$("#chart1").parent().height());
$("#pie-chart2").css("width",$("#chart1").parent().width()/2 - 20);
var pieChart2 = echarts.init(document.getElementById('pie-chart2'));
var pieoption2 = {
    title : {
        text: '控制设备数量分布',
        subtext: ' ',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['分类1','分类2','分类3','分类4','分类5']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'分类1'},
                {value:310, name:'分类2'},
                {value:234, name:'分类3'},
                {value:135, name:'分类4'},
                {value:1548, name:'分类5'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
getPieoPtionData_2();
function getPieoPtionData_2() {
    $.get("/ctrlequipment/type/list",function (data) {
        //获取分类数据
        var legend = {
            orient: 'vertical',
            left: 'left',
            data: []
        };
        var series =  [
            {
                name: '控制设备数量',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ];
        $.each(data.data,function (i, ele) {
            legend.data.push(ele.name);
            var obj = {value:0, name: ele.name};
            //获取分类的设备数据
            $.ajax({
                url : "/ctrlequipment/query?typeId=" + ele.id,
                async:false,
                success: function (data) {
                    if (data.count > 0) {
                        obj.value = data.count;
                        series[0].data.push(obj);
                    }
                }
            });
        });
        pieoption2.legend = legend;
        pieoption2.series = series;
        pieChart2.setOption(pieoption2);
    });
}

/*
 * 动态设置Echarts图的宽高
 */
/*
function chartSize() {
	let parent = document.querySelector("#carousel4>div[carousel-item]");
	let chart = parent.querySelector('#chart1');
	let height = window.getComputedStyle(parent, null).getPropertyValue('height');
	let width = window.getComputedStyle(parent, null).getPropertyValue('width');
	chart.style.height = height;
	chart.style.width = width;
};

chartSize();

//chart尺寸跟随窗口
window.onresize = function() {
	chartSize();
	chart.resize();
}	

/!**
 * Echart--数据概览
 *!/

var chart = (function() {
	var dom = document.querySelector('#carousel4 #chart1');
	var myChart = echarts.init(dom);
	var app = {};
	var option = null;
	app.title = '堆叠柱状图';

	option = {
		title: {
			text: '访问量'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		legend: {
			data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
		}],
		yAxis: [{
			type: 'value'
		}],
		series: [{
				name: '直接访问',
				type: 'bar',
				data: [320, 332, 301, 334, 390, 330, 320]
			},
			{
				name: '邮件营销',
				type: 'bar',
				stack: '广告',
				data: [120, 132, 101, 134, 90, 230, 210]
			},
			{
				name: '联盟广告',
				type: 'bar',
				stack: '广告',
				data: [220, 182, 191, 234, 290, 330, 310]
			},
			{
				name: '视频广告',
				type: 'bar',
				stack: '广告',
				data: [150, 232, 201, 154, 190, 330, 410]
			},
			{
				name: '搜索引擎',
				type: 'bar',
				data: [862, 1018, 964, 1026, 1679, 1600, 1570],
				markLine: {
					lineStyle: {
						normal: {
							type: 'dashed'
						}
					},
					data: [
						[{
							type: 'min'
						}, {
							type: 'max'
						}]
					]
				}
			},
			{
				name: '百度',
				type: 'bar',
				barWidth: 5,
				stack: '搜索引擎',
				data: [620, 732, 701, 734, 1090, 1130, 1120]
			},
			{
				name: '谷歌',
				type: 'bar',
				stack: '搜索引擎',
				data: [120, 132, 101, 134, 290, 230, 220]
			},
			{
				name: '必应',
				type: 'bar',
				stack: '搜索引擎',
				data: [60, 72, 71, 74, 190, 130, 110]
			},
			{
				name: '其他',
				type: 'bar',
				stack: '搜索引擎',
				data: [62, 82, 91, 84, 109, 110, 120]
			}
		]
	};;
	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	}
	return myChart;
})();*/
